<nz-card>
  <div class="seach-wrap">
    <div class="seach-rt">
      <div class="seach-item">
        <label class="seach-item-label">举报类型：</label>
        <nz-select nzShowSearch [(ngModel)]="seachParams.type" (ngModelChange)="statusChange($event)">
          <nz-option
            *ngFor="let item of reportTypeOptions"
            [nzLabel]="item.label"
            [nzValue]="item.value">
          </nz-option>
        </nz-select>
      </div>
  
      <div class="seach-item">
        <label class="seach-item-label">状态：</label>
        <nz-select nzShowSearch nzAllowClear nzPlaceHolder="全部" [(ngModel)]="seachParams.status">
          <nz-option
            *ngFor="let item of stateOptions"
            [nzLabel]="item.label"
            [nzValue]="item.value">
          </nz-option>
        </nz-select>
      </div>
  
      <div class="seach-btns">
        <nz-space>
          <button *nzSpaceItem nz-button nzType="primary" (click)="queryData()">查询</button>
          <button *nzSpaceItem nz-button (click)="resetData()">重置</button>
        </nz-space>
      </div>
    </div>
  </div>
  
  <main class="pagination-wrap-position">
    <!-- Table -->
    <div class="table-wrap">
        <nz-table
          #basicTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          nzOuterBordered
          [nzScroll]="{ x: '1150px' }"
          [nzFrontPagination]="false"
          [nzLoadingDelay]="100"
          [nzLoading]="tableForms.tableLoading"
          [nzData]="tableData"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="tableForms.total"
          [nzPageIndex]="tableForms.page"
          [nzPageSize]="tableForms.pageSize"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onPageIndexChange($event)"
          (nzPageSizeChange)="onPageSizeChange($event)"
          (nzQueryParams)="onQueryParamsChange($event)"
        >
          <thead>
            <tr>
              <th nzAlign="center" nzWidth="100px" nzLeft>ID</th>
              <th nzAlign="center" *ngIf="activeTableType == '0'">被举报帖子ID</th>
              <th nzAlign="center" *ngIf="activeTableType == '1'">被举报评论内容</th>
              <th nzAlign="center">所属用户ID</th>
              <th nzColumnKey="count" nzAlign="center" [nzSortFn]="true">被举报次数</th>
              <th nzAlign="center">状态</th>
              <th nzColumnKey="create_time" nzAlign="center" [nzSortFn]="true">首次举报时间</th>
              <th nzAlign="center" nzWidth="400px" nzRight>操作</th>
            </tr>
          </thead>
  
          <tbody>
            <tr *ngFor="let data of basicTable.data; let index = index;">
              <!-- ID -->
              <td nzAlign="center" nzLeft>{{ data.id }}</td>
              <!-- 被举报帖子ID -->
              <td nzAlign="center" *ngIf="activeTableType == '0'">{{ data.businessId }}</td>
              <!-- 被举报评论内容 -->
              <td nzAlign="center" *ngIf="activeTableType == '1'" nzBreakWord>{{ data.content || '-' }}</td>
              <!-- 所属用户ID -->
              <td nzAlign="center">{{ data.userId }}</td>
              <!-- 被举报次数 -->
              <td nzAlign="center">{{ data.count }}</td>
              <!-- 状态 -->
              <td nzAlign="center">{{ data.status | reportStatus }}</td>
              <!-- 首次举报时间 -->
              <td nzAlign="center">{{ data.createTime || '-' }}</td>
              <!-- 操作 -->
              <td nzAlign="center" nzRight>
                <button nz-button nzType="link" [routerLink]="['/business-circle/reportRecord', data.id]">详情</button>
                <button *ngIf="data.type == 0" nz-button nzType="link" [routerLink]="['/business-circle/postsDetails', data.businessId]">查看帖子</button>
                <a
                  *ngIf="data.type == '0' && data.status == '0'"
                  nz-button
                  nzType="text"
                  nzDanger
                  nz-popconfirm
                  nzPopconfirmTitle="确认下架帖子吗?"
                  [nzIcon]="iconTpl"
                  (nzOnConfirm)="modifyData(data, 0)">下架帖子</a>
                <ng-template #iconTpl>
                  <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                </ng-template>
                <a
                  *ngIf="data.type == '1' && data.status == '0'"
                  nz-button
                  nzType="text"
                  nzDanger
                  nz-popconfirm
                  nzPopconfirmTitle="确认删除评论吗?"
                  [nzIcon]="iconTpl2"
                  (nzOnConfirm)="modifyData(data, 1)">删除评论</a>
                <ng-template #iconTpl2>
                  <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                </ng-template>
                <a
                  *ngIf="data.status == '0'"
                  nz-button
                  nzType="text"
                  nzDanger
                  nz-popconfirm
                  nzPopconfirmTitle="确认无效举报吗?"
                  [nzIcon]="iconTpl3"
                  (nzOnConfirm)="modifyData(data, 2)">无效举报</a>
                <ng-template #iconTpl3>
                  <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                </ng-template>
              </td>
            </tr>
          </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ tableForms.total }} 条</ng-template>
    </div>
  </main>
</nz-card>